<template>
	<canvas
		v-if="canvasId"
		:id="canvasId"
		:canvasId="canvasId"
		:style="{
			width: cWidth * pixelRatio + 'px',
			height: cHeight * pixelRatio + 'px',
			transform: 'scale(' + 1 / pixelRatio + ')',
			'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
			'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px'
		}"
		@touchstart="touchStart"
		@touchmove="touchMove"
		@touchend="touchEnd"
		@error="error"
	/>
</template>

<script>
import uCharts from './u-charts.js';
var canvases = {};

export default {
	props: {
		chartType: {
			required: true,
			type: String,
			default: 'column'
		},
		opts: {
			required: true,
			type: Object,
			default() {
				return null;
			}
		},
		canvasId: {
			type: String,
			default: 'u-canvas'
		},
		cWidth: {
			default: 375
		},
		cHeight: {
			default: 250
		},
		pixelRatio: {
			type: Number,
			default: 1
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			switch (this.chartType) {
				case 'column':
					this.initColumnChart();
					break;
				case 'line':
					this.initLineChart();
					break;
				default:
					break;
			}
		},
		initColumnChart() {
			canvases[this.canvasId] = new uCharts({
				$this: this,
				canvasId: this.canvasId,
				type: 'column',
				legend: true,
				fontSize: 11,
				background: '#FFFFFF',
				pixelRatio: this.pixelRatio,
				animation: true,
				categories: this.opts.categories,
				series: this.opts.series,
				enableScroll: true,
				xAxis: {
					disableGrid: true,
					itemCount: 4,
					scrollShow: true
				},
				yAxis: {
					//disabled:true
				},
				dataLabel: true,
				width: this.cWidth * this.pixelRatio,
				height: this.cHeight * this.pixelRatio,
				extra: {
					column: {
						type: 'group'
					}
				}
			});
		},
		initLineChart() {
			canvases[this.canvasId] = new uCharts({
				$this: this,
				canvasId: this.canvasId,
				type: 'line',
				fontSize: 11,
				legend: true,
				dataLabel: false,
				dataPointShape: true,
				background: '#FFFFFF',
				pixelRatio: this.pixelRatio,
				categories: this.opts.categories,
				series: this.opts.series,
				animation: true,
				enableScroll: true,
				xAxis: {
					type: 'grid',
					gridColor: '#CCCCCC',
					gridType: 'dash',
					dashLength: 8,
					itemCount: 4,
					scrollShow: true
				},
				yAxis: {
					gridType: 'dash',
					gridColor: '#CCCCCC',
					dashLength: 8,
					splitNumber: 5,
					min: 10,
					max: 180,
					format: val => {
						return val.toFixed(0) + '元';
					}
				},
				width: this.cWidth * this.pixelRatio,
				height: this.cHeight * this.pixelRatio,
				extra: {
					line: {
						type: 'straight'
					}
				}
			});
		},
		// 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改
		changeData(cid, newdata) {
			canvases[cid].updateData({
				series: newdata.series,
				categories: newdata.categories
			});
		},
		touchStart(e) {
			canvases[this.canvasId].showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
			canvases[this.canvasId].scrollStart(e);
		},
		touchMove(e) {
			canvases[this.canvasId].scroll(e);
		},
		touchEnd(e) {
			canvases[this.canvasId].scrollEnd(e);
		},
		error(e) {
			console.log(e);
		}
	}
};
</script>

<style scoped>
.charts {
	width: 100%;
	height: 100%;
	flex: 1;
	background-color: #ffffff;
}
</style>
